<template>
  <div
    class="rela"
    style="margin: 40px; border: 1px solid #eeeeee; width: 375px; height: 680px"
  >
    <!-- 标题 -->
    <div
      class="rela flexcen"
      style="text-align: center; height: 40px; line-height: 40px"
    >
      <img
        class="shou abso"
        style="width: 20px; height: 20px; top: 10px; left: 5px"
        src="@/assets/images/back.png"
        @click="back"
        alt=""
      />
      <div style="max-width: 180px" class="overtxt">{{ form.taskName }}</div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="content_title" v-if="form.describe">任务描述</div>
      <div
        v-if="form.describe"
        class="part_description"
        v-html="form.describe"
      ></div>
      <!--tab -->
      <div
        class="tabscroll"
        v-horizontal-scroll-drag
        v-if="form.contentTemporaries && form.contentTemporaries.length > 0"
      >
        <div class="tab flex">
          <div
            v-for="(item, index) in form.contentTemporaries"
            :key="index"
            class="tab_item rela shou"
            @click="stepIndex = index"
          >
            {{ item.contentName ? item.contentName : "内容" + (index + 1) }}
            <div class="tab_active abso" v-if="stepIndex == index"></div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div
        v-if="
          form.contentTemporaries &&
          form.contentTemporaries.length > 0 &&
          form.contentTemporaries[stepIndex].description
        "
        class="steps"
        v-html="form.contentTemporaries[stepIndex].description"
      ></div>
      <div
        class="step_title"
        v-if="
          form.contentTemporaries &&
          form.contentTemporaries.length > 0 &&
          form.contentTemporaries[stepIndex].taskFileTemporaries &&
          form.contentTemporaries[stepIndex].taskFileTemporaries.length > 0
        "
      >
        教学课件：
      </div>
      <div
        class="courseware_list"
        v-if="
          form.contentTemporaries &&
          form.contentTemporaries.length > 0 &&
          form.contentTemporaries[stepIndex].taskFileTemporaries &&
          form.contentTemporaries[stepIndex].taskFileTemporaries.length > 0
        "
      >
        <div
          class="courseware_list_item shou"
          @click="openFile(item2.fileUrl)"
          v-for="(item2, index2) in form.contentTemporaries[stepIndex]
            .taskFileTemporaries"
          :key="index2"
        >
          <img
            class="pdf_img"
            :src="returnIcon(item2.fileUrl, item2.type)"
            alt=""
          />
          <div class="pdf_name overtxt">{{ item2.fileName }}</div>
        </div>
      </div>
      <div
        class="popup_content_temp"
        v-if="form.practiceId || form.examId || form.homeworkId"
      ></div>
      <div class="popup_content flexbet abso">
        <div
          class="content_item bg_brown shou"
          v-if="form.practiceId && form.practicePublish == 1"
          @click.stop="handleExam('practice', form.practiceId)"
        >
          习题练习
        </div>
        <div
          class="content_item bg_blue shou"
          v-if="form.examId && form.examPublish == 1"
          @click.stop="handleExam('onlineExam', form.examId)"
        >
          考核
        </div>
        <div
          class="content_item bg_work shou"
          v-if="form.homeworkId && form.homeworkPublish == 1"
          @click.stop="handleExam('homework', form.homeworkId)"
        >
          作业
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { returnIcon } from "@/utils/util.js";
import {
  getPost_courseTask,
  listPost_courseTaskContent,
  listPost_file,
} from "@/api/course/task";
import {
  getPost_officalCourseTask,
  listPost_officalCourseTaskContent,
  listPost_officalFile,
} from "@/api/course/officalTask";
export default {
  props: {
    taskId: [String, Number],
  },
  data() {
    return {
      returnIcon: function (url, type) {
        return returnIcon(url, type);
      },
      form: {
        contentTemporaries: [{ taskFileTemporaries: [], description: "" }],
        description: "",
      },
      stepIndex: 0,
    };
  },
  watch: {
    stepIndex: {
      handler(newVal, oldVal) {
        this.getFileList();
      },
    },
  },
  mounted() {},
  methods: {
    back() {
      this.$emit("taskBack");
    },

    handleExam(type, id) {
      this.$emit("toStartExam", {
        type: type,
        examId: id,
        taskName: this.form.taskName,
      });
    },
    openFile(url) {
      window.open(url, "_blank");
    },
    async getTask(taskId) {
      let res;
      if (this.$route.query.status.includes("temporary")) {
        res = await getPost_courseTask(taskId);
      } else {
        res = await getPost_officalCourseTask(taskId);
      }
      res.data.contentTemporaries = [];
      this.form = res.data;
      await this.getcontentTemporaries(taskId);
      this.stepIndex = 0;
      await this.getFileList();
    },
    /* 获取内容列表 (分草稿和正式课程)*/
    async getcontentTemporaries(taskId) {
      let res;
      if (this.$route.query.status.includes("temporary")) {
        res = await listPost_courseTaskContent({
          taskTemporaryId: taskId,
          pageSize: 999,
          pageNum: 1,
        });
      } else {
        res = await listPost_officalCourseTaskContent({
          taskId: taskId,
          pageSize: 999,
          pageNum: 1,
        });
      }
      res.rows.map((item) => {
        item.taskFileTemporaries = [];
        // item.description = "";
      });
      this.form.contentTemporaries = res.rows;
    },
    /* 获取任务附件列表 */
    async getFileList() {
      if (this.form.contentTemporaries.length > 0) {
        let res;
        if (this.$route.query.status.includes("temporary")) {
          res = await listPost_file({
            contentTemporaryId: this.form.contentTemporaries[this.stepIndex].id,
          });
        } else {
          res = await listPost_officalFile({
            contentId: this.form.contentTemporaries[this.stepIndex].contentId,
          });
        }
        this.form.contentTemporaries[this.stepIndex].taskFileTemporaries =
          res.rows;
      }
      console.log("获取任务附件列表", this.form.contentTemporaries);
    },
  },
};
</script>
<style scoped lang="scss">
.tabscroll {
  display: flex;
  min-width: 341px;
  justify-content: center;
  overflow-x: scroll;
  .tab {
    max-width: 100%;
    height: 44px;
    flex-wrap: nowrap;
    .tab_item:first-of-type {
      margin-left: 0px;
    }
    .tab_item {
      white-space: nowrap;
      margin-left: 54px;
      line-height: 44px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      text-align: left;
      font-style: normal;
      .tab_active {
        left: 50%;
        transform: translateX(-50%);
        bottom: -1px;
        width: 24px;
        height: 3px;
        background: conic-gradient(
          from 0deg at -1.5612511283791264e-15% 50%,
          #ff4d03 0%,
          #ff9a00 100%
        );
        border-radius: 1.5px;
      }
    }
  }
}

.content {
  overflow-x: hidden;
  height: 640px;
  overflow-y: scroll;
  margin: 0 15px 0 15px;
  .content_title {
    line-height: 14px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
  }
  .part_description {
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    width: 100%;
    margin-top: 16px;
  }
}
.step_item {
  width: 100%;
  padding: 16px 9px;
  box-sizing: border-box;
}
.steps {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.step_title {
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin: 20px 0 24px;
}
.courseware_list {
  width: 100%;
}
.courseware_list_item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.pdf_img {
  width: 32px;
  height: 32px;
}
.pdf_name {
  line-height: 1;
  width: 300px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-left: 162px;
}
.popup_content_temp {
  width: 100%;
  height: 184px;
}
.popup_content {
  background: white;
  bottom: 0px;
  flex-wrap: wrap;
  padding: 20px 20px 0 20px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}
.content_item {
  margin-bottom: 10px;
  width: 152px;
  height: 72px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  padding: 14px;
  box-sizing: border-box;
}
.bg_work {
  background: url("https://oss.metaxun.com/wx/zy/homework.png");
  background-size: cover;
  color: #995538;
}
.bg_purple {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg1.png");
  background-size: cover;
  color: #4159a4;
}
.bg_blue {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg2.png");
  background-size: cover;
  color: #995538;
}
.bg_blue_dark {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg4.png");
  background-size: cover;
  color: #366d81;
}
.bg_brown {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg3.png");
  background-size: cover;
  color: #345c89;
}
</style>
